html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 弹跳球 </title>
- <style>
- #canvas{
- display: block;
- margin: 30px auto 0;
- }
- .content{
- width: 700px;
- background: #eee;
- padding: 15px 50px;
- margin: 30px auto 0;
- }
- .content input{
- width: 150px;
- outline: none;
- }
- .content-btn{
- width: 100px;
- height: 35px;
- line-height: 35px;
- color: #fff;
- text-align: center;
- background: #398e55;
- border: 1px solid #0f7152;
- letter-spacing: 3px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- cursor: pointer;
- margin-top: 30px;
- }
- input.warn{
- border:1px solid red;
- }
- </style>
- </head>
- <body>
- <canvas id="canvas" width="800" height="600"></canvas>
- <div class="content">
- <div > 水平位置: <input type="number" name="horizontal" placeholder="大于 40 小于 700" /></div>
- <div > 垂直位置: <input type="number" name="vertical" placeholder="大于 40 小于 500" /></div>
- <div > 发射速度: <input type="number" placeholder="大于 1" name="speed" /></div>
- <div class="content-btn"> 确定 </div>
- </div>
- <script src="http://cdn.bootCSS.com/jquery/3.2.1/jquery.min.js"></script>
- <script>
- $(function(){
- function Ganme(){
- this.right = true;
- this.bottom = true;
- this.init();
- }
- $.extend(Ganme.prototype,{
- init: function(){
- var self = this;
- self.render();
- },
- render: function(){
- var self = this;
- window.ctx = document.getElementById('canvas').getContext('2d');
- var border = new Image();
- border.src = 'http://img.redocn.com/sheying/20150602/shimubancaiqiangbi_4442548.jpg';
- border.onload = function(){
- ctx.drawImage(border,0,0,800,700);
- ctx.fillStyle = "#fff";
- ctx.rect(40,40,720,520);
- ctx.clip();
- ctx.fill();
- };
- self.drawBall(150,150);
- self.events();
- },
- events: function(){
- var self = this,
- $horizontal = $('input[name=horizontal]'),
- $vertical = $('input[name=vertical]'),
- $speed = $('input[name=speed]');
- $('.content-btn').on('click',function(){
- var horizontal = $horizontal.val(),
- vertical = $vertical.val(),
- speed = $speed.val();
- if( horizontal== "" || horizontal <40 || horizontal> 700){
- $horizontal.addClass('warn');
- return false;
- }else if(vertical == "" || vertical <40 || vertical> 500){
- $vertical.addClass('warn');
- return false;
- }else if(speed == "" || speed <1){
- $speed.addClass('warn');
- return false;
- }
- self.run(parseInt(horizontal),parseInt(vertical),parseInt(speed));
- });
- $('input').on('focus',function(){
- $(this).removeClass('warn');
- });
- },
- run: function(horizontal,vertical,speed){
- var self = this;
- self.drawBall(horizontal,vertical);
- var timer = setInterval(function(){
- if(speed> 0 ){
- self.right ? horizontal+=speed : horizontal-=speed;
- self.bottom ? vertical+=speed : vertical-=speed;
- if(horizontal <40){
- horizontal+=(40 - horizontal);
- self.right = true;
- speed--;
- }else if(horizontal> 700){
- horizontal-=(horizontal-700);
- self.right = false;
- speed--;
- }
- if(vertical <40){
- vertical+=(40-vertical);
- self.bottom = true;
- speed-=2;
- }else if(vertical> 500){
- vertical-=(vertical-500);
- self.bottom = false;
- speed--;
- }
- self.drawBall(horizontal,vertical);
- speed-=0.01;
- }else{
- clearInterval(timer);
- self.right = true;
- self.bottom = true;
- return false;
- }
- },100);
- },
- drawBall: function (dx,dy){
- ctx.clearRect(40,40,720,520);
- var ball = new Image();
- ball.src = 'http://pic.58pic.com/58pic/15/61/07/17V58PICZSw_1024.png';
- ball.onload = function(){
- ctx.drawImage(ball,dx,dy,50,72);
- };
- }
- });
- new Ganme();
- })
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/24824/843dc40b3da0317ff1630ec1b3e9e448.html