简单的射击游戏HTML+JS实现
一直想自己写一个游戏玩，时间和精力都不太允许，最近几天刚好有空闲时间，就琢磨了这个小游戏。
刚开始想着计算图片重叠事件,然后让炮弹和飞机消失,傻乎乎写了一天,越整越乱.今天一大早晕过来了，改用数组以后全部实现也就花了一个小时，有时候正确的方向真的比努力重要的多
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>射击游戏</title> <link type="text/css" rel="stylesheet" href="css.css"> <script type="text/javascript" src="control.js" charset="gbk"></script> </head> <body> <div id="body"> <div id="title"> <span id="sp">射击游戏</span> </div> <div id="area"> <div id="game_area"> </div> <div id="Down_1"> <img id="tank" src="tank.png"> </div> </div> <div id="right_1"> <h3>游戏说明:</h3><br> <p>1、暂停以后点开始游戏继续</p><br> <p>2、 暂不支持修改控制按键</p><br> <p>3、 点新游戏刷新页面,重新开始游戏</p><br> <p>4、 电脑情况不同可能出现卡顿</p><br> </div> <div id="right"> <div id="score">得分 :<br><span id="sp1">0</span><br>分 </div> <table> <tr> <td><input id="new" class="key" value="开始游戏" type="button" onclick="start()"></td> </tr> <tr> <td><input id="new" class="key" value="新游戏" type="button" onclick="newGame()"></td> </tr> <tr> <td><input id="stop" class="key" value="暂停" type="button" onclick="stop();"></td> </tr> <tr> <td>左：←<input id="key_left" value="←" class="key" maxlength="1" onblur="setLeft()" type="text"></td> </tr> <tr> <td>右：→<input id="key_right" value="→" class="key" maxlength="1" onblur="setRight()" type="text"></td> </tr> <tr> <td>发射：<input id="key_shot" value="x" class="key" maxlength="1" onblur="setShot()" type="text"></td> </tr> </table> </div> </div> </body> </html>
JS代码如下，最上面的二维数组写出了是为了思路清晰一点，把这个看成屏幕思路更清晰一点
var in_area=[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
];
window.onload=function(){
setInterval(color,200);
}
var fz_speed = 2000;//下落速度
function start(){//开始
clock_1 = setInterval(refresh,10);
clock_2 = setInterval(shot_move,10);//发射子弹速度
redom_fz;//产生一行飞机
clock_4 = setInterval(fz_move,1000);//飞机下落,
}
function stop(){//暂停
clearInterval(clock_1);
clearInterval(clock_2);
clearInterval(clock_3);
clearInterval(clock_4);
}
function newGame(){//重新开始,刷新页面,初始化页面为0
window.location.reload();
for(var i = 0;i<20;i++){
for(var j=0;j<20;j++){
in_area[i][j]=0;
}
}
}
function refresh(){
var line = document.getElementById("game_area");
line.innerHTML="";
for(var i = 0;i<20;i++){
for(var j=0;j<20;j++){
var img = line.appendChild(document.createElement("img"));
//in_area[i][j]=Math.floor(Math.random()*3);
if(in_area[i][j]==1){ //1 = 飞机
img.setAttribute("class","fz");
img.setAttribute("src","feiji.png");
}else if(in_area[i][j]==2){ //2 = 子弹
img.setAttribute("class","zd");
img.setAttribute("src","ziDan.png")
}else{ //0 = 消失
line.removeChild(img)
var img = line.appendChild(document.createElement("div"));
img.setAttribute("class","black");
}
}
}
}
//左右和射击,左37,右39,空格32,x键88
var left=37;
var right=39;
var shot = 88 ;
onkeydown=function(){
var e= event;
if(e.keyCode==left){
move_left();
}
if(e.keyCode==right){
move_right();
}
if(e.keyCode==shot){
new_shot();
}
}
//左移
function move_left(){
var tank = $("tank");
var left = getDefaultStyle(tank,'left');
if(left>0){
left = left-30;
tank.style.left=left+"px";
}
}
//右移
function move_right(){
var tank = $("tank");
var left = getDefaultStyle(tank,'left');
if(left<560){
left = left+30;
tank.style.left=left+"px";
}
}
//射击(坦克左右移动范围left:-10px~560px,加上10再除以30得到0~19列)
function new_shot(){
var tank = $("tank");
var left = (getDefaultStyle(tank,'left')+10)/30;
in_area[19][left]=2;
}
//子弹移动 子弹 = 2,从第二行开始遍历
function shot_move(){
for(var i = 1;i<20;i++){
for(var j=0;j<20;j++){
if(in_area[i][j]==2){
in_area[i-1][j]+=in_area[i][j];
in_area[i][j]=0;
if(in_area[i-1][j]==3){
in_area[i-1][j]=0;
addScore();
}
if(i==0){
in_area[i][j]=0;
}
}
}
}
}
//产生飞机0~1,出现飞机的频率,数字越大飞机越多
var level = 0.1;
function redom_fz(){
for(var j=0;j<20;j++){
if(Math.random()<level){
in_area[0][j]=1;
}
}
}
//飞机下落 飞机=1,从第一行开始遍历
function fz_move(){
for(var i = 19;i!=-1;i--){
for(var j=0;j<20;j++){
if(i-1>=0){
if(in_area[i-1][j]==1){
in_area[i][j]+=in_area[i-1][j];
in_area[i-1][j]=0;
if(in_area[i][j]==3){
in_area[i][j]=0;
addScore();
}
if(i>=19){
alert("Game Over!!!");
window.location.reload();
}
}
}
}
}
redom_fz() //产生一行飞机,在最上方
}
//设置分数
var score = 0;
function addScore(){
score++;
var s=$("sp1");
b = b+Math.floor(Math.random()*50);
y = y+Math.floor(Math.random()*50);
r = r+Math.floor(Math.random()*50);
if(b>255){
b = 0;
}
if(y>255){
y = 0;
}
if(r>255){
r = 0;
}
s.style.color="rgb("+b+","+y+","+r+")";
s.innerHTML=score;
}
//设置三原色
var b = 0;
var y = 0;
var r = 0;
var color = function(){
b = b+Math.floor(Math.random()*50);
y = y+Math.floor(Math.random()*50);
r = r+Math.floor(Math.random()*50);
if(b>255){
b = 0;
}
if(y>255){
y = 0;
}
if(r>255){
r = 0;
}
var p = document.getElementById("sp");
p.style.color="rgb("+b+","+y+","+r+")";
}
function $(id){
return document.getElementById(id);
}
function getDefaultStyle(obj,attribute){
return parseInt(window.getComputedStyle(obj, null)[attribute]);
}
CSS代码
@CHARSET "UTF-8";
*{
margin: 0px;
padding: 0px;
}
#body{
margin: auto;
margin-top:50px;
width: 1000px;
height: 700px;
border: solid 5px rgb(241,241,241);
background:rgb(255,255,225);
}
#score{
font-size: 0.8cm;
}
#game_area{
width: 600px;
height: 600px;
float: left;
}
#Down_1{
width: 600px;
height: 50px;
background-color: rgb(225,225,200);
float: left;
}
#tank{
height:50px;
width:50px;
background-color: black;
position: relative;
left:290px;
top:2px;
}
#sp1{
color: rgb(0,225,225);
font-size: 1.2cm;
}
#right{
width: 180px;
height: 600px;
float: right;
border: solid 2px rgb(225,225,225);
}
#right_1{
width: 180px;
height: 600px;
float: right;
border: solid 2px rgb(225,225,225);
}
tr{
height: 1.5cm;
}
#title{
width: 400px;
height: 50px;
position: relative;
left:40%;
}
#new,#stop{
position: relative;
left:30%;
}
.key{
width: 2cm;
height: 0.8cm;
;
}
#sp{
font-size: 1cm;
font-style: oblique;
}
#area{
width: 600px;
height: 650px;
border: solid 1px rgb(0,115,0);
float: left;
}
.fz{
width:30px;
height:30px;
position:relative;
float: left;
}
.zd{
width:30px;
height:30px;
position:relative;
float: left;
}
.black{
width:30px;
height:30px;
position:relative;
float: left;
}
图片素材:
feiji.png
tank.png
ziDan.png
简单的射击游戏HTML+JS实现的更多相关文章
- 无聊的人用JS实现了一个简单的打地鼠游戏
直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠) ...
- 一款简单射击游戏IOS源码
源码描述: 一款基于cocos2d的简单设计游戏,并且也是一款基于cocos2d的简单射击游戏(含苹果IAD广告), 游戏操作很简单,哪个数字大就点击射击哪个.里面有苹果iad广告,功能简单完整,适合 ...
- 使用Cocos2dx-JS开发一个飞行射击游戏
一.前言 笔者闲来无事,某天github闲逛,看到了游戏引擎的专题,引起了自己的兴趣,于是就自己捣腾了一下Cocos2dx-JS.由于是学习,所谓纸上得来终觉浅,只是看文档看sample看demo,并 ...
- Skytte：一款令人印象深刻的 HTML5 射击游戏
Skytte 是一款浏览器里的 2D 射击游戏.使用 Canvas 元素和大量的 JavaScript 代码实现.Skytte 是用我们的开源和现代的前端技术创造的.经典,快节奏的横向滚动射击游戏,探 ...
- 有图有真相，分享一款网页版HTML5飞机射击游戏
本飞机射击游戏是使用HTML5代码写的,尝试通过统一开发环境(UDE)将游戏托管在MM应用引擎,直接生成了网页版游戏,游戏简单易上手,非常适合用来当做小休闲打发时间. 游戏地址:http://flyg ...
- D3D游戏编程系列（六）：自己动手编写第一人称射击游戏之第一人称视角的构建
说起第一人称射击游戏,不得不提第一人称视角啊,没有这个,那么这个第一就无从谈起啊,我作为一个观察者究竟如何在这个地图上顺利的移动和观察呢,那么,我们一起来研究下. 我们首先来看下CDXCamera类: ...
- cocos2d-x学习日志(10) --射击游戏(喵星战争)
转载请标明:转载自[小枫栏目],博文链接:http://blog.csdn.net/rexuefengye/article/details/10553487 一.纵版射击游戏的特点 纵版射击游戏是一种 ...
- 练手项目：利用pygame库编写射击游戏
本项目使用pygame模块编写了射击游戏,目的在于训练自己的Python基本功.了解中小型程序框架以及学习代码重构等.游戏具有一定的可玩性,感兴趣的可以试一下. 项目说明:出自<Python编程 ...
- Golang+Protobuf+PixieJS 开发 Web 多人在线射击游戏(原创翻译)
简介 Superstellar 是一款开源的多人 Web 太空游戏,非常适合入门 Golang 游戏服务器开发. 规则很简单:摧毁移动的物体,不要被其他玩家和小行星杀死.你拥有两种资源 - 生命值(h ...
随机推荐
- [WebServer] Windows操作系统下 Tomcat 服务器运行 PHP 的环境配置
前言: 由于本人在开发和学习过程中需要同时部署 JavaWeb 和 PHP 项目,于是整理了网上的一些相关资料,并结合自己的实际操作,记录于此,以供参考. 一.环境(64bit): 1.操作系统.To ...
- JS判断客户端是否是iOS或者Android
通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端.代码如下: <script type="text/javascript"> var ...
- 浅谈对ionic项目的理解
在思考怎么将客户端app连接到服务器的时候,就在想ionic项目的本质是什么,一开始因为ionic serve这一命令,我以为它自己就是个服务器,但是后来一细想又感觉不是这样,不然客户端又该怎么和服务 ...
- Yii2 rules 添加时间比较功能
php比较类文件:yiisoft\yii2\validators\CompareValidator.php JS比较类文件: yiisoft\yii2\assets\yii.validation.js ...
- XP 安装不了framework 4.0 的解决方法
第一步: 如果是XP系统: 1.开始——运行——输入cmd——回车——在打开的窗口中输入net stop WuAuServ 2.开始——运行——输入%windir% 3.在打开的窗口中有个文件夹叫So ...
- learn python, ref, diveintopython 分类： python 2015-07-22 14:42 14人阅读 评论(0) 收藏
for notes of learing python. // just ignore the ugly/wrong highlight for python code. ""&q ...
- 使用Mulesoft建立webservice, simple方式，POJO
Mulesoft是使用CXF来支持web service,有三种方式 1.JAX-WS 2.Simple, POJO 3. Proxy, pass-throught 本文介绍POJO,最简单的方式 1 ...
- 写一个程序，用于分析一个字符串中各个单词出现的频率，并将单词和它出现的频率输出显示。（单词之间用空格隔开，如“Hello World My First Unit Test”）
public class Test { public void index() { String strWords = "Hello World My First Unit Test&quo ...
- Wen前端性能优化
Web前端性能优化 一般说来Web前端指网站业务逻辑之前的部分,包括浏览器加载.网站视图模型.图片服务.CDN服务等.主要优化手段有优化浏览器访问.使用反向代理.CDN等. 一.浏览器访问优化 减少h ...
- Delphi用QJSON解析JSON格式的数据
本来用superobject来解析JSON已经够用了,可惜这个东东不能在移动端使用,于是找到QJSON来处理. 这是一个国内高手写开源免费的东西,赞一个. 假入数据如下: {"message ...