几年前写的小东西 主要是H5画布的操作,还有个C语言基于WIN SDK开发的版本 找不到代码了 找到了再分享 <!DOCTYPE html> <script src="game/jquery190.js"></script> <body id="box" style="background: #000000;TEXT-ALIGN: center;margin-top: 0px;"> <div style="margin:0 auto;"> <canvas id="map" width="360" height="580"></canvas> </div> <audio src="game/back.wav" loop="loop" autoplay="autoplay"> </audio> <audio id ="kill" src="game/kill.wav"> </audio> <script> // JQ CODE start $(function() { // JQ按键处理 $("#box").keyup(function(e) { game.OnKeyUp(e.keyCode); }); }); // JQ CODE end // 实体类============================== var Ball = function(src, x, y, w, h) { this.imger = new Image(); this.number = 0; this.x = 0; this.y = 0; this.w = 0; this.h = 0; // Y轴移动增量 this.moveYSet = 1; // 键值 this.keyVal = 0; // 层格编号 this.layerNumber = 0; this.MoveY = function() { if (this.y >= 580) { this.y = 0; } this.y += this.moveYSet; } }; var Map = function() { this.img = null; this.w = 900; this.h = 580; }; // 层格 var Layer = function() { // 设置球球状态 this.isSetBall = 0; this.x = 0; this.y = 0; // 球球实体 this.ball = null; this.number = 0; }; var Game = function() { // 球球实数组 this.ballHandle = new Array(); // 球球总数 this.ballCount = 27; // 地图实体 this.maper = new Map(); this.ctx = null; // 层格 this.layer = new Array(); this.layerCount = 7; this.killPlayer = null; // A-Z键码表 this.keyVals = [0,65, 66,67,68,69,70,71,72,73,74, 75,76,77,78,79,80,81,82,83,84,85,86, 87,88,89,90]; this.OnKeyUp = function(keyVal) { for (i = 1; i < this.layerCount; i++) { if (this.layer[i].ball.keyVal==keyVal){ this.layer[i].isSetBall = 0; /* * 播放击中声音,命中率高的时候声音会不同步,考虑做到woker里 */ this.killPlayer.play(); return false; } } } // test this.GetIndexSechm = function(){ var k = UtilManage.FrandomBy(1,26); for (i = 1; i < this.layerCount; i++){ if (this.layer[i].ball.number == k){ this.GetIndexSechm(); } } return k; } this.Start = function() { this.ctx.drawImage(this.maper.img, 0, 0, 900, 580); for (i = 1; i < this.layerCount; i++) { if (this.layer[i].isSetBall==0) { this.layer[i].ball = this.ballHandle[UtilManage.FrandomBy(1,26)]; this.layer[i].ball.y = 0; this.layer[i].isSetBall = 1; this.layer[i].ball.layerNumber = this.layer[i].number; } } for (i = 1; i < this.layerCount; i++) { this.layer[i].ball.x = this.layer[i].x; this.ctx.drawImage( this.layer[i].ball.imger, this.layer[i].ball.x, this.layer[i].ball.y, 60, 60); this.layer[i].ball.MoveY(); } } }; // 工具管理器 UtilManage = { FrandomBy:function(under, over) { switch (arguments.length) { case 1: return parseInt(Math.random() * under + 1); case 2: return parseInt(Math.random() * (over - under + 1) + under); default: return 0; } } }; // 游戏管理器 var GameManage = { Run: function() { GameManage.InitResource(); }, // 初始化游戏数据 InitResource: function() { game = new Game(); // 坐标校正 var ballXofs = 0; for (i = 1; i < game.layerCount; i++) { game.layer[i] = new Layer(); game.layer[i].number++ ; // 设置层格X坐标 game.layer[i].x = ballXofs + 2; ballXofs += (60); } for (i = 1; i < game.ballCount; i++) { game.ballHandle[i] = new Ball(); game.ballHandle[i].number = i; game.ballHandle[i].keyVal = game.keyVals[i]; game.ballHandle[i].imger = new Image(); game.ballHandle[i].imger.src = "game/" + i + ".png"; } game.maper.img = new Image(); game.maper.img.src = "game/bg.jpg"; game.killPlayer = document.getElementById("kill"); game.ctx = (document.getElementById("map")).getContext("2d"); setInterval("game.Start()", 50); } }; GameManage.Run(); </script> </body> </html>
时间: 2024-10-24 21:08:50