简单的射击游戏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 ...
随机推荐
- [移动端]rem适配
原理:给html根节点设置一个基础font-size值,然后页面的所有元素布局均相对于该font-size值采用rem单位设定.font-size的取值通过js计算. 但字体不用rem单位,原因如下: ...
- iOS 支付宝第三方使用步骤
使用支付宝进行一个完整的支付功能,大致有以下步骤: 1 与支付宝进行签约,获得商户ID(partner)和账号ID(seller) 2 下载相应的公钥私钥文件(加密签名用) 3 下载支付宝SDK 4 ...
- JDK动态代理与CGLib动态代理
1.JDK动态代理 JDK1.3以后java提供了动态代理技术,允许开发者在运行期创建接口的代理实例,动态代理是实现AOP的绝好底层技术. JDK的动态代理主要涉及到java.lang.reflect ...
- [小菜随笔]关于monkey报错日志分析
今天小菜在一个测试群内看到群友发出一个monkey的报错信息,其实是一个很简单的报错 个人觉得monkey虽然操作起来比较简易,但其实查看日志分析日志也是很重要的环节,如果对错误分析不够详细,就容易误 ...
- 006 复杂的数据类型&函数(方法)
2016-01-16 1.变量类型int double string char bool decimal变量的使用规则:先声明再赋值最后使用int number;number=10; number=2 ...
- AspNetPager控件分页使用方法
AspNetPager控件官方下载地址:http://www.webdiyer.com/aspnetpager/ 把控件加到项目中(添加自定义控件的方法),并把它拖放到页面上 <asp:Scri ...
- eap-peap/mschapv2
eap-peap/mschapv2 文件路径 用途 示例 备注 #gedit /usr/local/etc/raddb/sites-available/default #gedit /us ...
- JQuery ajax 异步传一个数组到 .net后台
可能使用JQuery Ajax传值到后台一个字符串,或者序列化后的表单大家都使用过,但是某些项目,需要我们一次传值一个数组到后台,这个时候有什么好的办法呢? 1.JS将数组转换为一个字符串,然后传值到 ...
- UI数据库
一.数据库 SQL: SQL是Structured Query Language(结构化查询语言)的缩写.SQL是专为数据库而建立的操作命令集, 是一种功能齐全的数据库语言. 二.数据库管理系统 数据 ...
- poj3237
//Accepted 2280 KB 688 ms /* source:poj3237 time :2015.5.29 by :songt */ /*题解: 树链剖分 基于边权,路径查询最大值 线段树 ...