简单的射击游戏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 ...
随机推荐
- 【图像处理】【SEED-VPM】6.文件目录结构
———————————————————————————————————————————————————————————————————————— seed-vpm6467 \ Hardware Tes ...
- walk around by The provided App differs from another App with the same version and product ID 分类： Sharepoint 2015-07-05 08:14 4人阅读 评论(0) 收藏
'm currently developing a SharePoint 2013 application. After a few deployments via Visual Studio, I ...
- Scala的第一步
第一步:学习使用Scala解释器 开始Scala最简单的方法是使用Scala解释器,它是一个编写Scala表达式和程序的交互式“shell”.在使用Scala之前需要安装Scala,可以参考 Firs ...
- 设计模式之observer and visitor
很长时间一直对observer(观察者)与visitor(访问者)有些分不清晰. 今天有时间进行一下梳理: 1.observer模式 这基本就是一个通知模式,当被观察者发生改变时,通知所有监听此变化的 ...
- STM32中断管理函数
CM3 内核支持256 个中断,其中包含了16 个内核中断和240 个外部中断,并且具有256 级的可编程中断设置.但STM32 并没有使用CM3 内核的全部东西,而是只用了它的一部分. STM32 ...
- SQL注入:突破关键字过滤
一直以来都以为只有空格,tab键和注释符/**/可以用来切割sql关键字,段时间在邪八看了风迅cms注入漏洞那篇帖子,才知道原来回车也可以用来作为分割符(以前竟然没有想到,真是失败).回车的ascii ...
- hive源码之新建一个coroutine
最近由于项目需要读了一下云风老大的hive项目代码,因为对lua只有熟悉的水平,下面的东西必然多多错误:),只为记录. lua_State *sL = schedule_newtask(L); str ...
- R语言XML包的数据抓取
htmlParse 函数 htmlParse加抓HTML页面的函数. url1<-"http://www.caixin.com/"url<-htmlParse(url1 ...
- 使用crosswalk优化ionic2应用包
ionic plugin add cordova-plugin-crosswalk-webview --save
- Your build settings specify a provisioning profile with the UUID, no provisioning profile
在Archive项目时,出现了“Your build settings specify a provisioning profile with the UUID “”, however, no suc ...