Guten Abend,
ich bin momentan dabei den Klassiker Doodle Jump für HTML5 zu scripten, allerdings bin ich grad eben beim Testen des ersten Codes gescheitert. Als Fehlercode bekomm ich Uncaught TypeError: object is not a function.
Hier mein Code:
index.html
Alles anzeigen
game.js
Alles anzeigen
Vielen Dank schonmal
ich bin momentan dabei den Klassiker Doodle Jump für HTML5 zu scripten, allerdings bin ich grad eben beim Testen des ersten Codes gescheitert. Als Fehlercode bekomm ich Uncaught TypeError: object is not a function.
Hier mein Code:
index.html
Quellcode
- <!DOCTYPE html>
- <html>
- <head>
- <title>Canvas</title>
- <script type="text/javascript" language="javascript" src="game.js"></script>
- <script language="javascript" type="text/javascript">
- window.onload = function(){
- var Test = new Game();
- };
- </script>
- <script language="javascript" type="text/javascript">
- </script>
- <style type="text/css">
- #game_canvas{
- background-image: url(images/paper.gif);
- background-repeat: repeat;
- border: 1px black solid;
- -moz-border-radius: 5px;
- border-radius: 5px;
- box-shadow: 0px 0px 6px black;
- }
- </style>
- </head>
- <body>
- <canvas id="game_canvas">
- </canvas>
- </body>
- </html>
game.js
Quellcode
- var Game = {
- canvas: null,
- context: null,
- width: null,
- height: null,
- fps: null,
- player: null,
- bg_image: null,
- init: function(cvs_id, cvs_width, cvs_height, fps){
- this.canvas = document.getElementById(cvs_id);
- this.context = canvas.getContext('2D');
- this.width = cvs_width;
- this.height = cvs_height;
- this.fps = fps;
- this.canvas.width = this.width;
- this.canvas.height = this.width;
- },
- start: function()
- {
- this.loop();
- },
- addPlayer: function(image_src, width, height){
- this.player = new player();
- this.player.width = width;
- this.player.height = height;
- this.player.image = new Image();
- this.player.image.src = image_src;
- this.player.setPosition((this.canvas.width/2)-(this.player.width/2), this.canvas.height-this.player.height);
- this.player.draw();
- },
- addBackground: function(image_src){
- this.bg_image = new Image();
- this.bg_image.src = image_src;
- },
- clearCanvas: function(){
- this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
- },
- loop: function(){
- this.clearCanvas();
- this.player.draw();
- setTimeout('this.loop()', 1000/this.fps);
- }
- };
- var player = {
- width: null,
- height: null,
- image: null,
- pos_x: 0,
- pos_y: 0,
- falling: false,
- jumping: false,
- setPosition: function(x, y){
- this.pos_x;
- this.pos_y;
- },
- draw: function(){
- game.context.drawImage(this.image, 0, 0, this.width, this.height, this.pos_x, this.pos_y, this.width, this.height);
- }
- };
- var platform = {
- width: null,
- height: null,
- image: null
- };
Vielen Dank schonmal