javascript写游戏脚本(原生JS实现飞机大战小游戏)
类别:编程学习 浏览量:1625
时间:2022-01-21 00:11:29 javascript写游戏脚本
原生JS实现飞机大战小游戏本文实例为大家分享了JS实现飞机大战小游戏的具体代码,供大家参考,具体内容如下
<html> <head> <title> 飞机大战 </title> <style type="text/css"> *{margin:0;padding:0;font-family:"Microsoft yahei"} body{overflow:hidden;;} </style> </head> <body> <script> window.onload = function(){ Game.exe(); }; var Game = { //启动程序 exe :function(){ document.body.style.background = '#fff'; var oli = document.createElement('li'); oli.id = 'GameBox'; oli.style.cssText = 'width:600px;height:500px;border:10px solid #999;margin:50px auto;font-family:"Microsoft yahei";text-align:center;position:relative;overflow:hidden;background:#fff'; document.body.appendChild(oli); this.init(); }, score : 0 , ifEnd : false, //初始化 init: function(){ var This = this; var oli = document.getElementById('GameBox'); oli.innerHTML = ''; Game.score = 0; Game.ifEnd = false; var oH = document.createElement('h1'); oH.innerHTML = '飞机大战 v1.0'; oH.style.cssText = 'color:#555555;font-size:30px;padding-top:50px;'; oli.appendChild( oH ); for (var i=0;i<4 ;i++ ) { var oP = document.createElement('p'); oP.index = i; oP.style.cssText = 'font-size:18px;color:white;width:180px;height:50px;margin:40px auto;text-align:center;background:#999;line-height:40px;font-family:"Microsoft yahei";font-weight:bold;cursor:pointer;' var html = ''; oP.onmouseenter = function(){ this.style.background = '#ff9933'; this.style.color = '##ff6600' }; oP.onmouseleave = function(){ this.style.background = '#999'; this.style.color = 'white' }; oP.onclick = function( e ){ e = e || window.event; This.start( this.index , oli , e ); }; switch( i ){ case 0: html = '简单难度'; break; case 1: html = '中等难度'; break; case 2: html = '困难难度'; break; case 3: html = '小天才附体'; break; } oP.innerHTML = html; oli.appendChild(oP); }; }, //游戏开始 start : function( index , oGameBox , e ){ oGameBox.innerHTML = ''; var oS = document.createElement('span'); oS.innerHTML = this.score; oS.style.cssText = 'position:absolute;left:20px;top:20px;font-size:14px;color:black;'; oGameBox.appendChild( oS ); this.plane( oGameBox , e ,index ); this.enemy( oGameBox ,oS ,index ); }, //关于飞机 plane : function( oGameBox , e ,index ){ var x = e.pageX; y = e.pageY; var oPlane = new Image(); oPlane.src = 'images/plane.jpg" alt="javascript写游戏脚本(原生JS实现飞机大战小游戏)" border="0" />
效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- pandasjson格式(对pandas处理json数据的方法详解)
- dedecms中的有些功能如何修改(织梦DEDECMS中用JS方式调用评论总数的技巧)
- js中Math对象的用法
- 什么是jsonp格式
- 用js编写tab栏切换(JavaScript实现简易tab栏切换内容栏)
- python将对象转换成json(python对象与json相互转换的方法)
- js图片水印库(js给图片打马赛克的方法示例)
- js实现网页特效(利用原生js模拟直播弹幕滚动效果)
- js怎么做一个计时器(JavaScript实现简单计时器)
- js中toFixed() 的使用
- vue切换图片效果(Vue.js实现图片切换功能)
- js简单小游戏代码(用JS实现飞机大战小游戏)
- JS中sort()和reverse()
- vue前台解析pdf文件流(Vue实现在线预览pdf文件功能利用pdf.js/iframe/embed)
- 使用Console调试js脚本
- 延迟加载js文件
- 中国留学生都是富二代吗()
- 我们现在吃的苹果是哪里来的 原来现代苹果引入中国仅有一百多年(我们现在吃的苹果是哪里来的)
- 买绿宝不能只挑黄绿色 菜农教你3招挑,个个皮薄肉脆,香甜爆汁(买绿宝不能只挑黄绿色)
- 大果肉搭配薄瓜皮, 绿宝 脆甜爽口,不愧是甜瓜中的 佼佼者(大果肉搭配薄瓜皮)
- 河南尉氏县因地制宜发展果蔬种植 水坡镇绿宝甜瓜变 金瓜(河南尉氏县因地制宜发展果蔬种植)
- 谢广坤,你这么欺负谢腾飞,良心不会痛吗(你这么欺负谢腾飞)
热门推荐
- laravel自定义条件查询(解决laravel groupBy 对查询结果进行分组出现的问题)
- sql执行原理详解(Sql server中内部函数fn_PhysLocFormatter存在解析错误详解)
- dockerswarm网络模式(详解Docker Swarm概念与用法)
- vue数据改变页面不刷新(vue列表数据删除后主动刷新页面及刷新方法详解)
- sql查询重复记录
- python批量图像换背景(详解Python给照片换底色蓝底换红底)
- sqlserver2012登录出现报错18456(SQL Server 2012 sa用户登录错误18456的解决方法)
- laravel命令控制器怎么设置(Laravel获取当前请求的控制器和方法以及中间件的例子)
- linux关闭autofs服务命令(Linux系统的ECS实例挂载NAS提示“mount: can't find /root/nas in /etc/fstab”错误的解决)
- Convert.ToInt32,int.Parse,int.TryParse,(int)的区别