简单的射击游戏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 ...
随机推荐
- linux下编译出现空间不足解决办法
linux下编译出现空间不足解决办法 编译内核出现问题: AS .tmp_kallsyms1.o .tmp_kallsyms1.S:2: fatal error: when writing ...
- 实验一 cmd命令的编写
一.目的和要求 1. 实验目的 (1)掌握命令解释程序的原理: (2)*掌握简单的DOS调用方法: (3)掌握C语言编程初步. 2．实验要求 编写类似于DOS,UNIX的命令行解释程序 (1)自行定义 ...
- Android Token的使用学习
学习Token Token是什么? Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Tok ...
- java格式化时间格式
System.out.println("Hello World!"); SimpleDateFormat format = new SimpleDateFormat( " ...
- golang中不定参数与数组切片的区别
package main import "fmt" func main() { myfunc1(, , , ) //传递不定数量的参数 myfunc2([], , , }) //传 ...
- iOS autolayout 代码，自定义间距
最近换了新的项目组,然后这个项目组是纯代码,然后我就开始试着用代码去写适配,结果学艺不精,遇到个闪退,搜了一下发现几乎没有人遇到这个问题,后来发现其实就是我自己太粗心了. 我是这样写的 NSArray ...
- 安装lnmp一键安装包（转）
系统需求: CentOS/RHEL/Fedora/Debian/Ubuntu/Raspbian Linux系统 需要3GB以上硬盘剩余空间 128M以上内存,Xen的需要有SWAP,OpenVZ的另外 ...
- Pegasos: Primal Estimated sub-GrAdient Solver for SVM
Abstract We describe and analyze a simple and effective iterative algorithm for solving the optimiza ...
- 最后一次PSP
PSP: 一.计划 完成这个任务需要五天左右. 二.开发 1.需求分析: 作为一个排球比赛的现场工作人员,我需要统计每一名球员的得分以及技术统计(如:发球,拦网,一传等等),以便于颁发每场比赛的MVP ...
- weixin 公众平台开发
http://www.cnblogs.com/szw/archive/2013/05/14/weixin-course-index.html http://weixin.senparc.com/